{include file="public/header" select="0" /}
<style>
    .layui-form-radio:hover *, .layui-form-radioed, .layui-form-radioed > i {
        color: var(--bc);
    }
</style>
<body class="hide-top">
<div class="login-container">
    <img src="/static/index/img/icon37.png" alt="">
    <div class="draw-hd forget-hd">
        <i class="layui-icon layui-icon-left" onclick="goBack()"></i>忘记密码
    </div>
    <div class="login-content forget-content">
        <form action="{:url('login/forget')}" method="post" class="form layui-form">
            <ul class="login-list">
                <li>
                    <p>找回类型</p>
                    <div>
                        <div>
                            <input type="radio" name="type" lay-filter="type" checked value="password" title="登录密码">
                        </div>
                        <div class="right" >
                            <input type="radio" name="type" lay-filter="type" value="pay_password" title="支付密码">
                        </div>
                    </div>
                </li>
                <li>
                    <p>手机号</p>
                    <div>
                        <input type="number" id="mobile" name="mobile" lay-verify="required" lay-reqtext="请输入手机号"
                               placeholder="请输入手机号" autocomplete="off">
                    </div>
                </li>
                <li>
                    <p>验证码</p>
                    <div>
                        <input type="text" name="captcha" lay-verify="required" lay-reqtext="请输入短信验证码"
                               placeholder="请输入短信验证码" autocomplete="off">
                        <span class="code code1">获取验证码</span>
                        <span class="code code2"></span>
                    </div>
                </li>
                <li>
                    <p>新密码</p>
                    <div>
                        <input type="password" name="password" lay-verify="required" lay-reqtext="请输入新密码"
                               placeholder="请输入新密码">
                    </div>
                </li>
                <li>
                    <p>确认新密码</p>
                    <div>
                        <input type="password" name="password_confirm" lay-verify="required" lay-reqtext="请确认新密码"
                               placeholder="请确认新密码">
                    </div>
                </li>
            </ul>
            <p class="save" lay-submit lay-filter="save" formObj=".form">保存</p>
        </form>
    </div>
</div>
{include file="public/footer" select="0" /}
<script>
    var os = true;
    var time = 60;
    $('.code2').hide();
    $('.code1').click(function () {
        var mobile = $('#mobile').val();
        if (!mobile) {
            layer.msg('请输入手机号');
            return false;
        }
        if (os !== true) return false;
        os = false;
        layer.load(2);
        $.ajax({
            type: "POST",
            url: "{:url('userCode/sendSms')}",
            data: {mobile: mobile, action: 'forgetPassword'},
            success: function (data) {
                layer.closeAll();
                if (data.code === 1) {
                    layer.msg(data.msg, {time: 1500}, function () {
                        $('.code2').html(time + 's');
                        time--;
                        $('.code1').hide().siblings('.code2').show();
                        let isTime = setInterval(() => {
                            if (time == 0) {
                                clearInterval(isTime);
                                time = 60;
                                $('.code2').hide().siblings('.code1').show();
                                os = true;
                            }
                            $('.code2').html(time-- + 's')
                        }, 1000);
                    });
                } else {
                    os = true;
                    layer.msg(data.msg);
                }
            }
        });
    })
</script>
</body>
</html>